<%@page import="com.gfa4j.resource.ResourceManagerServer"%>
<%@page import="com.wef.common.util.CommonMessageDomain"%>
<%@ include file="/pages/common/taglib.jsp"%>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
		<title></title>
		<%@include file="/styles/css_lib.jsp"%>
		<%@include file="/scripts/widgets/jquery-ui/css_lib.jsp"%>
		<%@include file="/scripts/widgets/multi-selector/css_lib.jsp"%>
		<link rel="stylesheet" type="text/css" href="${ctx}/pages/demo/demo.css" />
		
		<%@include file="/pages/common/js_global.jsp"%>
		<%@include file="/scripts/sdk/js_lib.jsp"%>
		<%@include file="/scripts/config/js_lib.jsp" %>
		<%@include file="/scripts/utils/js_lib.jsp"%>
		<%@include file="/scripts/i18n/js_lib.jsp"%>
		<%@include file="/scripts/format/js_lib.jsp"%>
		<%@include file="/scripts/validate/js_lib.jsp"%>
		<%@include file="/scripts/widgets/jquery-ui/js_lib.jsp"%>
		<%@include file="/scripts/widgets/datePicker/js_lib.jsp"%>
		<%@include file="/scripts/widgets/multi-selector/js_lib.jsp"%>
		<script type="text/javascript" src="${ctx}/pages/demo/demo.js"></script>
		<script type="text/javascript" src="./multi_selector.js"></script>
		
		
		<script type="text/javascript">
			//App.pageCustomEnable = true;App.pageId = "jqgrid";
			$(window).ready(function(){
				$('div[accordion=true]').accordion({collapsible : true});
				$('div[tabGroup=true]').tabs();
				$('#pageLoadComplete').attr('isComplete',true);
			});
		</script>
	</head>
<body class="body">
	<!-- ------------------------------------------------------------------------------------------ -->
	<div class="Desc">
		功能:1.常规复选控件,如下: (<a href="#" id="aDiv1">查看源码</a>)
	</div>
	<div id="div1" style="display: none;">
		&lt;k:multiSelector id="propertyName" /&gt;
		<p>
		$(window).ready(function(){
			$('#propertyName').multiSelector();
		});
		</p>
	</div>
	<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
		<form>
			<ul allowChange="true" class="edit_box">
				<li>
					<k:label text="demo.control.multiSelector" allowBlank="false"/>
					<k:multiSelector styleId="propertyName" sourceTitleKey="demo.control.multiSelector.source" destiTitleKey="demo.control.multiSelector.desti"/>						
				</li>
			</ul>
		</form>
	</div>
	<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
		<ul class="button_box">
			<li>
				<k:button styleId="btnSetSourceDatas" text="demo.control.multiSelector.setSourceDatas" styleClass="button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"/>
			</li>
			<li>
				<k:button styleId="btnSetDestiDatas" text="demo.control.multiSelector.setDestiDatas" styleClass="button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"/>
			</li>
		</ul>
	</div>
	<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
		<ul class="button_box">
			<li>
				<k:button styleId="btnGetSourceSelectedValues" text="demo.control.multiSelector.getSourceSelectedValues" styleClass="button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"/>
			</li>
			<li>
				<k:button styleId="btnGetDestiSelectedValues" text="demo.control.multiSelector.getDestiSelectedValues" styleClass="button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"/>
			</li>
		</ul>
	</div>
	<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
		<ul class="button_box">
			<li>
				<k:button styleId="btnGetSourceAllValues" text="demo.control.multiSelector.getSourceAllValues" styleClass="button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"/>
			</li>
			<li>
				<k:button styleId="btnGetDestiAllValues" text="demo.control.multiSelector.getDestiAllValues" styleClass="button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"/>
			</li>
		</ul>
	</div>
	<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
		<ul class="button_box">
			<li>
				<k:button styleId="btnGetSourceSelectedDatas" text="demo.control.multiSelector.getSourceSelectedDatas" styleClass="button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"/>
			</li>
			<li>
				<k:button styleId="btnGetDestiSelectedDatas" text="demo.control.multiSelector.getDestiSelectedDatas" styleClass="button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"/>
			</li>
		</ul>
	</div>
	<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
		<ul class="button_box">
			<li>
				<k:button styleId="btnGetSourceAllDatas" text="demo.control.multiSelector.getSourceAllDatas" styleClass="button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"/>
			</li>
			<li>
				<k:button styleId="btnGetDestiAllDatas" text="demo.control.multiSelector.getDestiAllDatas" styleClass="button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"/>
			</li>
		</ul>
	</div>
	<br />
	<!-- ------------------------------------------------------------------------------------------ -->
	
	<!-- ------------------------------------------------------------------------------------------ -->
	<div class="Desc">
		功能:2.Text带分隔符的复选控件,如下: (<a href="#" id="aDiv2">查看源码</a>)
	</div>
	<div id="div2" style="display: none;">
		&lt;k:multiSelector id="propertyName2" /&gt;
		<p>
		$(window).ready(function(){
			$('#propertyName2').multiSelector();
		});
		</p>
	</div>
	<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
		<form>
			<ul allowChange="true" class="edit_box">
				<li>
					<k:label text="demo.control.multiSelector" allowBlank="false"/>
					<k:multiSelector styleId="propertyName2" sourceTitleKey="demo.control.multiSelector.test"/>						
				</li>
			</ul>
		</form>
	</div>
	<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
		<ul class="button_box">
			<li>
				<k:button styleId="btnSetSourceDatas2" text="demo.control.multiSelector.setSourceDatas" styleClass="button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"/>
			</li>
			<li>
				<k:button styleId="btnSetDestiDatas2" text="demo.control.multiSelector.setDestiDatas" styleClass="button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"/>
			</li>
		</ul>
	</div>
	<br />
	<!-- ------------------------------------------------------------------------------------------ -->
	
	<div id="pageLoadComplete" isComplete="false" style="display: none;"></div>
</body>
</html>